<!DOCTYPE html>
<!--

repeating-decimal.html

repeating decimal Thought Patch

Copyright (C) 2010, Chris Allert, All rights reserved.

This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation; either version 3 of the License, or (at your option) any later 
version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with 
this program; if not, write to the Free Software Foundation, Inc., 59 Temple 
Place, Suite 330, Boston, MA 02111-1307 USA

The latest version of this file can be downloaded from
http://thought-patches.sourceforge.net/

-->
<html manifest="repeating-decimal.manifest">
	<head>
		<title>repeating</title>
<link rel="apple-touch-icon" href="repeating-decimal.png">
<link rel="apple-touch-startup-image" href="repeating-decimal-startup.png">
<meta content="width=device-width; initial-scale=1.0;  maximum-scale=1.0; user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<style>
	* {
		font-family: sans-serif;
		-webkit-user-select: none;
	}
	body { 
		padding:0px; 
		margin:0px; 
		color: white; 
		background-color: black; 
		font-size: 16px 
		overflow: hidden;
	}
	input { 
		font-size:16px;
		padding: 0px;
	}
	select { 
		font-size:16px;
		padding: 0px;
	}
	form { padding:0px; margin:0px; }
</style>
		<script src="../../lib/contrib/jsbn/jsbn.js"></script>
		<script src="../../lib/contrib/jsbn/jsbn2.js"></script>
		<script src="../../lib/big-number.js"></script>
		<script src="../../lib/form.js"></script>
		<script src="../../lib/canvas.js"></script>
		<script src="../../lib/query.js"></script>
		<script>

			var remember = 0;
			var message;

			var n_n;
			var n_d;
			var n_b;

			var current_animation = 0;

			function show_decimal(d) {
				var s = (big_int_format_digits(d.before, true)).split().join(' ');
				if ( d.after.length > 0 || d.repeating.length > 0) {
					s += " . "
				} 
				s += big_int_format_digits(d.after, false);
				if (d.repeating.length > 0) {
					var digits = new Array();
					//var digits = big_int_format_digits(d.repeating, false).split("");
					for (var i = 0; i < d.repeating.length; ++i) {
						digits[i] = 
						'<span id="digit_' + current_animation + '_' + i + '" style="color: ' +
						rainbow_color(i/d.repeating.length) +
						'">' + big_int_format_digits([d.repeating[i]], false) + "</span>";
					}
					s += "<strong>" + 
						digits.join(" ") +
					"</strong>" + " ...";
				}
				// s += ' <small><span style="color: #aaa">(base ' + n_b.value + ")</span></small>";
				message.innerHTML = s;
			}

			function animate_decimal() {

				++current_animation;
				var o = big_fraction_to_repeating({
					numerator: n_n.value, 
					denominator: n_d.value, 
					base: n_b.value
				});
				show_decimal(o);
				resize_canvas();

				var d = new_draw_dot_circle();
				d.x = canvas.width / 2;
				d.y = canvas.height / 2;
				d.r = Math.min(d.x, d.y);
				d.r -= 20;
				d.dr = 2;
				d.count = n_b.value;

				canvas_clear();

				var dots = draw_dot_circle(d);

				var lines = [];
				for (var i = 0; i < o.repeating.length; ++i) {
					var l = new_draw_rainbow_line();
					l.steps = 12;
					l.thick = 4;

					var pa = dots[parseInt(o.repeating[i])];
					var pb = dots[parseInt(o.repeating[(i + 1) % o.repeating.length])];
					l.xa = pa.x;
					l.ya = pa.y;
					l.xb = pb.x;
					l.yb = pb.y;

					l.clra = i/o.repeating.length;
					l.clrb = (i + 1)/o.repeating.length;
					lines.push({
						line: l, 
						color: rainbow_color(i/o.repeating.length),
						digit: document.getElementById("digit_" + current_animation + "_" + i)
					});
					//draw_rainbow_line(l);
				}

				var ca = current_animation;
				var f;
				var g = function() {
					var old = lines.pop();
					lines.push(old);
					var line = lines.shift();
					lines.push(line);
					f(line, old);
				}

				var af = function() { 
					return current_animation == ca;
				}

				f = function(line, old) {
					if (null == line) { return; }
					line.digit.style.color = 'white';
					old.digit.style.color = old.color;
					animate_rainbow_line(line.line, g, af, 50);
				}

				g();
			}

			function changed_numerator(ns) {
				// alert("changed numerator to " + ns.value);
				animate_decimal();
			}

			function changed_denominator(ns) {
				// alert("changed denominator to " + ns.value);
				animate_decimal();
			}

			function changed_base(ns) {
				// alert("changed base to " + ns.value);
				n_n.change_base(ns.value);
				n_d.change_base(ns.value);
				animate_decimal();
			}

			function on_resize() {
				n_n.change_base(n_b.value);
				n_d.change_base(n_b.value);
				animate_decimal();
			}

			function resize_canvas() {
				var e = document.getElementById('form_div');
				canvas.width = window.innerWidth; 
				canvas.height = window.innerHeight - e.clientHeight;
				e.style.top = ((window.innerHeight - e.clientHeight)) + 'px';
				e.style.left= ((window.innerWidth - e.clientWidth) / 2) + 'px';
				//ctx.globalCompositeOperation = 'lighter';
			}

			function init() {
				document.getElementById('submit_button').disabled = !navigator.onLine;
				canvas_init();
				message = document.getElementById('message');
				n_n = new NumberSpinner({
					select: document.getElementById('numerator'),
					min: 0,
					value: 1,
					page_size: 100
				});
				n_n.update();
				n_n.callback = changed_numerator;
				n_d = new NumberSpinner({
					select: document.getElementById('denominator'),
					min: 1,
					value: 7,
					page_size: 100
				});
				n_d.update();
				n_d.callback = changed_denominator;
				n_b = new NumberSpinner({
					select: document.getElementById('base'),
					min: 2,
					value: 10,
					page_size: 100
				});
				n_b.callback = changed_base;
				n_b.update();
				n_n.change_base(n_b.value);
				n_d.change_base(n_b.value);

				read_query_string();
				window.onresize = on_resize;
				setTimeout(on_resize, 500);
				// half-second delay to work around 
				// ipad/iphone phone number highlighting 
				// bug when in web-app mode
			}

			function read_query_string() {
				query_init();
				if (null != query['numerator']) {
					n_n.change_value(query['numerator'][0]);
				}
				if (null != query['denominator']) {
					n_d.change_value(query['denominator'][0]);
				}
				if (null != query['base']) {
					n_b.change_value(query['base'][0]);
				}
			}

		</script>
	</head>
	<body onLoad="init()">
	<div id="canvas_div" style="position: absolute; "><canvas id="canvas" class="canvas"  width="320" height="280">This site does not work in your browser.<br /><a href="http://code.google.com/chrome/chromeframe/">click here to install</a></canvas></div>
<div id="form_div" style="position:absolute; text-align: center; ">
		<form action="../share/share.html" method="get">
		<select id="numerator" name="numerator" onChange="number_spinner_callback(this)"><option></option></select>
		/
		<select id="denominator" name="denominator" onChange="number_spinner_callback(this)"><option></option></select>
		<label for="base">base</label>
		<select id="base" name="base" onChange="number_spinner_callback(this)"><option></option></select>
			<input type="hidden" name="patch" value="repeating-decimal" />
			<input id="submit_button" type="submit" value="share" />
		</form>
		<div id="message" style="text-align: left; ">&nbsp;</div>
	</div>
	</body>
</html>
